<!-- Requires #search_tags_input to exist -->
<div class="relative cursor-pointer border-2 rounded-lg border-green-300 p-2 px-5 m-1 shadow"
    id="tag_{{tag['name']}}" hx-post="/tags/create/{{adventure_id}}/{{tag.name}}" hx-target="#tags_list"
    hx-swap="outerHTML" _="on click event.stopPropagation()
        on htmx:afterRequest 
            if detail.xhr.status == 200
                remove me
                set #tags_dropdown's *display to 'none'
                call #search_tags_input's focus()
            end
        on keyup from #search_tags_input
            set v to its value
            if not my innerHTML.includes(v.trim())
                set my *display to 'none'
            else 
                set my *display to 'block'
            ">{{tag["name"]}}</div>